<!-- 
作者:wisher
时间:2023/6/25
页面:主页展示
 -->
<template>
	<view style="height: 100vh;background: #f6f6f6;overflow: scroll;">
		<view class="status_bar" :style="menuButton?`height:${menuButton.bottom}px`:''"></view>
		<view v-if="!menuButton" style="height: 60rpx;"></view>
		<view style="padding: 0 30rpx;display: flex;align-items: center;position: relative;">
			<!-- <image style="width: 120rpx;height: 120rpx;border-radius: 50%;flex-shrink: 0;"
				:src="userinfo?userinfo.avatarUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.JpR_JBS05HZA_R0DfduoDQHaHG?pid=ImgDet&rs=1'"
				mode="aspectFill">
			</image> -->
			<uv-skeleton :loading="loading" avatar avatarSize="120rpx">
				<uv-avatar size="120rpx" :src="userinfo?userinfo.avatarUrl:''" shape="circle"></uv-avatar>
			</uv-skeleton>
			<view style="width: 100%;padding-left: 30rpx;">
				<uv-skeleton :loading="loading" title>
					<p style="font-size: 35rpx;padding-bottom: 10rpx;font-weight: bold;">
						{{userinfo?userinfo.username:'登录/注册'}}
					</p>
				</uv-skeleton>
				<uv-skeleton :loading="loading">
					<p style="font-size: 28rpx;">{{userinfo?'只做学习用途。。想不到什么写的':'登录后享受更多看剧权益'}}</p>
				</uv-skeleton>
			</view>
			<button v-if="!userinfo" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;"
				@click="getUserInfo">login</button>
		</view>
		<view class="ctrBox">
			<view @click="toHistry"
				style="display: flex;align-items: center;justify-content: space-between;font-size: 25rpx;">
				<view class="module_tittle">观看历史</view>
				<view style="color: #666;"><span><span>更多</span><uni-icons color="#666" type="forward"
							size="30rpx"></uni-icons></span></view>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view v-if="playHistry.length==0" style="padding: 20rpx 0 0;font-size: 25rpx;">
					暂时没有观看记录
				</view>
				<view v-for="(p,i) in playHistry" :key="i" @click="toInfoPage(p)"
					style="padding: 20rpx 0 0;padding-right: 20rpx;display: inline-block;overflow: hidden;width: 250rpx;">
					<view
						style="width: 100%;height: 150rpx;border-radius: 20rpx;overflow: hidden;margin-bottom: 10rpx;position: relative;">
						<image :src="p.vod_img" style="width: 100%;height: 100%;" mode="aspectFill"></image>
						<view
							style="position: absolute;left: 0;bottom: 0;background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 255));width: 100%;">
							<view style="color: #fff;font-size: 25rpx;padding: 10rpx;">
								{{p.episode_name}}
							</view>
							<view style="position: absolute;bottom: 0;left: 0;background: #00d1d1;height: 5rpx;"
								:style="true?`width:calc(250rpx * ${p.currentTime/p.duration})`:''">
							</view>
						</view>
					</view>
					<view
						style="width: 250rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 25rpx;">
						{{p.vod_name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="ctrBox" style="padding: 0 30rpx;">
			<view class="ctrBox-item" @click="checkUpdate" v-if="showupdate">
				<view class="ctrBox-item-title">检查更新</view>
				<uni-icons type="forward" size="40rpx"></uni-icons>
			</view>
			<view class="ctrBox-item" @click="loginOut">
				<view class="ctrBox-item-title">退出登录</view>
				<uni-icons type="forward" size="40rpx"></uni-icons>
			</view>
		</view>
		<uv-loading-page :loading="loading" loading-text="加载中..." font-size="24rpx"></uv-loading-page>
	</view>
</template>

<script>
	import userInfo from '@/static/userInfo.js'
	import api from '@/static/api.js'
	export default {
		data() {
			return {
				menuButton: null,
				playHistry: [],
				userinfo: null,
				isweixin: false,
				loading: true,
				showupdate: false
			}
		},
		onLoad() {
			//#ifndef APP-PLUS || H5
			this.menuButton = uni.getMenuButtonBoundingClientRect()
			//#endif 

			//#ifdef APP-PLUS
			this.showupdate = true
			//#endif 
		},
		onShow: async function(res) {
			this.userinfo = await userInfo.userInfo()
			this.playHistry = await userInfo.watchHistry()
			this.loading = false
		},
		methods: {
			checkUpdate() {
				//#ifdef APP-PLUS
				uni.showLoading({
					title: '检查更新中'
				});
				api.configGet({
					key: 'version'
				}).then(res => {
					uni.hideLoading();
					if (parseInt(res.data.data) > plus.runtime.versionCode)
						uni.navigateTo({
							url: '/pages/update/update?ver=' + res.data.data
						})
					else
						uni.showToast({
							title: '已经是最新版本',
							duration: 2000,
							icon: 'none'
						});
				})
				//#endif
			},
			async loginOut() {
				this.userinfo = await userInfo.loginOut()
			},
			toHistry() {
				//跳转播放
				uni.navigateTo({
					url: '/pages/playHistry/playHistry'
				})
			},
			toInfoPage(e) {
				//跳转播放
				uni.navigateTo({
					url: '/pages/videoInfo/videoInfo?id=' + e.vod_id
				})
			},
			saveUserInfo() {
				uni.setStorage({
					key: 'userInfo',
					data: this.userinfo
				});
				getApp().globalData.userInfo = this.userinfo
			},
			getUserInfo(e) {
				let this_ = this
				uni.navigateTo({
					url: '/pages/loginPage/loginPage'
				})
				return;
				//#ifdef MP-WEIXIN
				uni.getUserProfile({
					desc: 'weixin', // 这个参数是必须的
					success: res => {
						console.log(res)
						uni.login({
							provider: 'weixin',
							success(ls) {
								res.code = ls.code
								uniCloud.callFunction({
									name: 'wxLogin', // 你的云函数名称
									data: res
								}).then(e => {
									let data = e.result.data
									this_.userinfo = data
									this_.saveUserInfo()
									console.log(data)
								}).catch(err => {})
							}
						})
					}
				})
				//#endif
				//#ifdef APP-PLUS
				uni.preLogin({
					provider: 'univerify',
					success() { //预登录成功
						uni.login({
							provider: 'univerify',
							univerifyStyle: {
								"fullScreen": true,
								"otherLoginButton": {
									"visible": false
								},
							},
							success(res) { // 登录成功
								uniCloud.callFunction({
									name: 'appLogin', // 你的云函数名称
									data: res.authResult
								}).then(res => {
									let data = res.result.data
									this_.userinfo = data
									uni.closeAuthView()
									this_.saveUserInfo()
								}).catch(err => {})
							},
							fail(res) { // 登录失败
								console.log(res.errCode)
								console.log(res.errMsg)
							}
						})
					},
					fail(res) {
						console.log(res.errCode)
						console.log(res.errMsg)
					}
				})
				//#endif

				//#ifndef APP-PLUS || MP-WEIXIN
				uni.showToast({
					title: '尚不支持该平台',
					duration: 2000,
					icon: 'error'
				});
				//#endif
			},
		}
	}
</script>

<style lang="less">
	.ctrBox {
		margin: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;

		&-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;


			&-title {
				font-size: 30rpx;
			}
		}
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.module_tittle {
		font-size: 30rpx;
		font-weight: 600;
	}
</style>